import React, { useEffect, useState ,useMemo} from 'react';  
import { Button, Modal, Select,Table ,Tabs } from 'antd';  
import './indexRoom.less';  

import type { TabsProps } from 'antd'; 
import InformationCard from './components/InformationCard'
import CurrentUser from './components/CurrentUser';
import OtherSettings from './components/OtherSettings';

/** 
 * @name <ModalComponent/> 第一层弹出框
 *  
 * @param onChange  Tabs组件切换
 * 
 * @name 当前组件传参说明
 * 
 * @component  <InformationCard userMsg={selectedItem.user} ChildRoom={selectedItem.ChildRoom} 
 * 
 * @param  userMsg 用户的详细信息 
 * @param  ChildRoom 当前房间的子房间 没有不会显示
 * 
 * @component   <CurrentUser userMsg={selectedItem.user} 
 * 
 * @param  userMsg 用户的详细信息
 * 
 * 
 * */
interface Props {  
  isModalOpen: boolean;  
  handleOk: () => void;  
  selectedItem: any;  
}  
const ModalComponent: React.FC<Props> = ({ isModalOpen, handleOk, selectedItem }) => { 
  
  const informationCard = useMemo(() => (
    <InformationCard userMsg={selectedItem.user} ChildRoom={selectedItem.ChildRoom} />
  ), [selectedItem.user, selectedItem.ChildRoom]);
  const items: TabsProps['items'] = [
    {  
      key: '1',  
      label: '发卡信息',  
      children: informationCard,
    },
    selectedItem.user && {  
      key: '2',  
      label: '入住人信息',  
      children: <CurrentUser userMsg={selectedItem.user} />,  
    },
    {  
      key: '3',  
      label: '其他设置',  
      children:<OtherSettings/>,  
    },
  ].filter(Boolean); // 过滤掉为空的数据
  const [selectedOption, setSelectedOption] = useState(''); // 获取子房间的值  
  
  useEffect(() => {  
    // console.log('第一层',selectedItem);  
  }, []);  
  
  const handleSelectChange = (value: string) => {  
    setSelectedOption(value);  
  };  
  const onChange = (key: string) => {  
    setSelectedKey(key);  
  };  
  const [selectedKey, setSelectedKey] = useState('1'); // 初始选中的是第一个 tab  
  const modalTitle = (  
    <>  
     <div className='titleBoder'>
    
     房型：  <span>  
        {selectedItem.Roomoid} -{' '}  
        {selectedItem.Roomlei === 0  
          ? '大床房'  
          : selectedItem.Roomlei === 1  
          ? '双人房'  
          : '总统套房'  
          }  
      { }  -{' '}  
          {selectedItem.Roomgan === 0  
          ? '干净房'  
          : selectedItem.Roomgan === 1  
          ? '脏房 '  
          : '维修房'  
          }  
      </span>  
      <span> &emsp;&emsp;&emsp;&emsp;&emsp;&nbsp; </span>  
      {selectedItem.ChildRoom.length !== 0 && (  
        <Select  
          onChange={handleSelectChange}  
          className="custom_dropdown"  
          placeholder="请选择子房间"  
        >  
          {selectedItem.ChildRoom.map((item: any, index: number) => (  
            <Select.Option key={index} value={item}>  
              {item}  
            </Select.Option>  
          ))}  
        </Select>  
      )}  
        <div className='PXboder'></div> {/*0.5px的线*/ }
     </div>
    </>  
  );  

  return (  
    <>  
      <Modal  
        title={modalTitle}  
        open={isModalOpen}  
        onOk={handleOk}  
        onCancel={handleOk}  
        width={950}
       footer={null}
        >  
            <Tabs   
        defaultActiveKey={selectedKey}   
        items={items}   
        onChange={onChange}   
      />  
      </Modal>  
    </>  
  );  
};  
  
export default ModalComponent;